Challenge: Styling a home color scheme search app

The final challenge of our styling basics module features a mockup of a "Home color search app" UI, the idea being to let users input a color and retrieve a range of variations along with sample color scheme ideas. Your task is to style the provided form, table, and button controls, and make sure the images display as expected.

Note: The tinted images used in this challenge have been adapted from the original available on Flickr: Chic Living Room, published by Houseology Interiors under CC BY-NC 2.0.

](https://developer.mozilla.org/pong/click?code=aHR0cHM6Ly9zcnYuYnV5c2VsbGFkcy5jb20vYWRzL2NsaWNrL3gvR1RORDQyN1VDWUJJS0szTkY2U0xZS1FVQ0FTSTQySllDVjdEQ1ozSkNBU0k1S0o3RlQ3SVRLSktGVDdJVjUzTkNLWUk1MlE3Q0FCRDY1M0VGNjdJNTVRS0M2U0k1MkpOQzZZREVLM0VISk5DTFNJWg%3D%3D.vux%2Ft%2BaEk%2F1lYtYpTjmwQ8yQdcSutI7PKuP32IPXPEI%3D&version=2)Ad

Starting point

To begin, click the Play button in one of the code panels below to open the provided example in the MDN Playground. You'll then follow the instructions in the Project brief section to style the page appropriately.

htmlCopyPlay

<section>
  <h1>Home color search</h1>
  <form>
    <div>
      <label for="color">Color to search for:</label>
      <input type="text" id="color" name="color" value="pink" />
    </div>
    <div>
      <label for="results-per-page">Results per page:</label>
      <input
        type="text"
        id="results-per-page"
        name="results-per-page"
        value="4" />
    </div>
    <div>
      <button type="button">Submit</button>
    </div>
  </form>
</section>
<hr />
<section>
  <h2>Search results</h2>
  <table>
    <caption>
      Sample colors and color schemes
    </caption>
    <thead>
      <tr>
        <th scope="col">Color</th>
        <th scope="col">Raw color</th>
        <th scope="col">Tags</th>
        <th scope="col">Sample color scheme</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Pink</td>
        <td><code>rgb(255 192 203)</code></td>
        <td>pink, pale, light</td>
        <td>
          <img
            src="https://mdn.github.io/shared-assets/images/examples/learn/home-color-schemes/living-room-pink.png"
            alt="Image of living room in a pink color scheme" />
        </td>
      </tr>
      <tr>
        <td>Baker-Miller pink</td>
        <td><code>rgb(255 145 175)</code></td>
        <td>pink, pale, bright</td>
        <td>
          <img
            src="https://mdn.github.io/shared-assets/images/examples/learn/home-color-schemes/living-room-baker-miller-pink.png"
            alt="Image of living room in a Baker-Miller pink color scheme" />
        </td>
      </tr>
      <tr>
        <td>Hotpink</td>
        <td><code>rgb(255 105 180)</code></td>
        <td>pink, bright, vivid</td>
        <td>
          <img
            src="https://mdn.github.io/shared-assets/images/examples/learn/home-color-schemes/living-room-hotpink.png"
            alt="Image of living room in a hotpink color scheme" />
        </td>
      </tr>
      <tr>
        <td>Fuchsia</td>
        <td><code>rgb(255 0 255)</code></td>
        <td>pink, medium, bright</td>
        <td>
          <img
            src="https://mdn.github.io/shared-assets/images/examples/learn/home-color-schemes/living-room-fuchsia.png"
            alt="Image of living room in a fuchsia color scheme" />
        </td>
      </tr>
    </tbody>
  </table>
  <div class="controls">
    <button disabled>Previous</button>
    <p>Showing page 1 of 20</p>
    <button>Next</button>
  </div>
</section>

cssCopyPlay

* {
  box-sizing: border-box;
}

html {
  font-family: "Helvetica", "Arial", sans-serif;
}

body {
  margin: 0 10px;
}

hr {
  margin: 3em 0;
}

h2 {
  margin-top: 0;
}

/* Prev/next control layout */

.controls {
  display: flex;
  padding: 10px 0;
  justify-content: space-between;
  align-items: center;
}

/* Form and button styling */

form div {
  display: flex;
  align-items: center;
  gap: 2em;
  margin-bottom: 1em;
}

label {
  text-align: right;
  flex: 1;
}

input {
  flex: 3;
}

/* Table styling */

table img {
  width: 100%;
  height: 150px;
}

Play

Project brief

Follow the steps below to complete the project, sizing the content pane appropriately and adding the required decorations.

Add a form reset

First of all, add some "reset" styles to the <button> and <input> elements to give them a consistent starting state across browsers.

Specifically:

Make them inherit the font family set on the rest of the page.
Give them a font size of 100%.
Remove all their padding and margin.

Style the form inputs

Give the <input> elements:

A 2px solid border with the color #999999.
10px of padding.
5px rounded corners.

Style the buttons

Give the <button> elements:

No border.
A black background color and white text color.
5px rounded corners.
Vertical padding of 10px and horizontal padding of 2em.
A background color of #666666 when hovered or focused.
A background color of #aaaaaa when disabled.

Style the table

You should now add some best practice styling to the table, as learned earlier in the module, plus a few extras.

Specifically:

Give the table a fixed layout, a width of 100%, and collapsed borders.
Make the table's top and bottom borders 1px thick, solid, and colored #999999.
Give the table header cells and normal cells 0.6em of padding, and make their content vertically aligned to the top of the cells.
Give the table header cells a bottom border that is 1px thick, solid, and colored #999999.
Give all of the table rows a width of 20%, except for the fourth row, which should have a width of 40%.
Inside the table body, there are four rows. The second cell inside each of these rows contains text for an rgb() color. Give each one of these cells a background color that corresponds to its text.
Create zebra stripes: Give each odd-numbered row a background color of #eeeeee, inside the table body only.
Give the caption padding of 1em, an italic font style, and letter spacing of 1px.

Fixing the image display

At this point, there is a problem with the images in the table — we've set each image to 100% of the width of its table cell container, and a specific height of 150px, as we didn't want the table rows to get too high. However, this has distorted the aspect ratio of the images, making them look a bit squashed.

We'd like you to style the images so that:

They are displayed at their intrinsic aspect ratio, but with a bit of the image cut off so they still fit inside the size of the <img> elements.
The bottom of the image is shown, but the top of the image is cut off.

Hints and tips

You don't need to alter the HTML in any way.

Example

The finished project should look like this:

Play

Click here to show the solution

A possible solution could be:

Help improve MDN

Was this page helpful to you?

YesNo

Learn how to contribute

This page was last modified on Oct 17, 2025 by MDN contributors.

View this page on GitHub • Report a problem with this content

Filter sidebar

Your blueprint for a better internet.

MDN

Contribute

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.